<template>
  <div class="container">
    <div class="content">
      <div class="label">{{ label }}</div>
      <div class="value">
        <!--<textarea></textarea>-->
        <!--<input v-if="isSelect" type="text" placeholder="请在此输入"-->
        <!--:value="text" @input="$emit('input', $event.target.value)">-->
        <span v-if="!isSelect">
        <popup-picker :data='selectDataArr' v-model="selectData" placeholder="请选择"
                      @on-change='change'>sadf</popup-picker>
      </span>
      </div>
      <div class="icon" v-if="right">
        <span v-if="isIcon">
          <x-icon type="ios-arrow-down" size="20"></x-icon>
        </span>
      </div>
    </div>
    <textarea class="text-val" v-if="isSelect" :value="text"
              @input="$emit('input', $event.target.value)" placeholder="请在这里输入..."></textarea>
  </div>

</template>

<script>
  import {PopupPicker} from 'vux'
  export default {
    name: 'list-item',
    components: {
      PopupPicker
    },
    model: {
      prop: 'text',
      event: 'input'
    },
    props: {
      selectDataArr: {
        type: Array
      },
      right:{
        type:Boolean,
        default:true
      },
      defaultSelectData: {
        type: Array,
        default() {
          return []
        }
      },
      text: {
        type: String,
        default: ''
      },
      label: {
        type: String,
        default: '',
        required: true
      },
      valText: {
        type: String,
        default: ''
      },
      isSelect: {
        type: Boolean,
        default: true
      },
      selectList: {
        type: Array,
        default() {
          return []
        }
      },
      isIcon: {
        type: Boolean,
        default: false
      }
    },
    // watch: {
    //   defaultSelectData: {
    //     handle(val) {
    //
    //     },
    //     deep: true,
    //     immediate: true
    //   }
    // },
    data() {
      return {
        selected: '请选择',
        selectData: []
      }
    },
    methods: {
      change(e) {
        console.log(e)
        this.$emit('change', e.length > 0 ? e[0] : '')
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .vux-x-icon {
    fill: #ccc;
  }
  .container{
    padding: 0 15px;
  }
  .content {
    display: flex;
    font-size: 14px;
    height: 35px;
    align-items: center;
    /*border-bottom: 1px solid #cccccc;*/
    /*margin-left: 20px;*/
    .label {
      flex: 3;
      color: #000000;
      font-weight: 400;
      text-align: left;
    }
    .value {
      flex: 2;
      text-align: left;
      width: 146px;
      span {
        width: 146px;
        display: inline-block;
        text-align: left;
      }
    }
    .icon {
      flex: 4;
      text-align: right;
      margin-right: 10px;
    }
  }
  .text-val {
    border: 1px solid #cccccc;
    outline: none;
    resize: none;
    width: 100%;
    height: 40px;
    margin: 5px 0;
    padding: 5px;
  }
</style>
